<script setup lang="ts">
import DocIcon from '@/components/doc-icon.vue'
import { getArticleListAPI } from '@/api/home'

import { ref, onMounted, computed } from 'vue'

defineOptions({
  name: 'tab-home'
})

const active = ref('recommend')
const current = ref(1)
const pageSize = ref(10)

const articleListParams = computed(() => {
  return {
    type: active.value,
    current: current.value,
    pageSize: pageSize.value
  }
})

import type { Row } from '@/types/home'

const loading = ref(false)
const finished = ref(false)
const articleList = ref<Row[] | undefined>([])

const loadArticleList = async () => {
  loading.value = true
  const { data } = await getArticleListAPI(articleListParams.value)
  if (data) {
    articleList.value = data.rows
    current.value += 1
    loading.value = false
    if (current.value >= data.pageTotal) {
      finished.value = true
    }
  }
}

onMounted(() => {
  loadArticleList()
})

const changeActive = () => {
  console.log(11111)

  current.value = 1
  loading.value = false
  finished.value = false
  articleList.value = []
  loadArticleList()
}

import ArticleList from '@/components/article-list.vue'
</script>

<template>
  <div class="top">
    <div class="title">优医</div>
    <div class="search" @click="$router.push('/search')">
      <div class="icon">
        <DocIcon name="home-search" />
      </div>
      <div class="text">搜一搜：疾病/症状/医生/健康知识</div>
    </div>
  </div>
  <div class="w">
    <div class="grid">
      <div class="row l">
        <div class="col">
          <div class="icon">
            <DocIcon name="home-doctor" />
          </div>
          <div class="title">问医生</div>
          <div class="deatils">按科室查问医生</div>
        </div>
        <div class="col">
          <div class="icon">
            <DocIcon name="home-graphic" />
          </div>
          <div class="title">极速问诊</div>
          <div class="deatils">20s医生极速回复</div>
        </div>
        <div class="col">
          <div class="icon">
            <DocIcon name="home-prescribe" />
          </div>
          <div class="title">开药门诊</div>
          <div class="deatils">线上买药更方便</div>
        </div>
      </div>
      <div class="row s">
        <div class="col">
          <div class="icon">
            <DocIcon name="home-order" />
          </div>
          <div class="text">药品订单</div>
        </div>
        <div class="col">
          <div class="icon">
            <DocIcon name="home-docs" />
          </div>
          <div class="text">健康档案</div>
        </div>
        <div class="col">
          <div class="icon">
            <DocIcon name="home-rp" />
          </div>
          <div class="text">我的处方</div>
        </div>
        <div class="col">
          <div class="icon">
            <DocIcon name="home-find" />
          </div>
          <div class="text">疾病查询</div>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="@/assets/ad.png" alt="" />
    </div>
    <div class="article">
      <van-tabs v-model:active="active" @change="changeActive">
        <van-tab name="like" title="关注">
          <div class="item">
            <ArticleList
              v-model:loading="loading"
              :finished="finished"
              :list="articleList"
              @load="loadArticleList"
            />
          </div>
        </van-tab>
        <van-tab name="recommend" title="推荐">
          <div class="item">
            <ArticleList
              v-model:loading="loading"
              :finished="finished"
              :list="articleList"
              @load="loadArticleList"
            />
          </div>
        </van-tab>
        <van-tab name="fatReduction" title="减脂">
          <div class="item">
            <ArticleList
              v-model:loading="loading"
              :finished="finished"
              :list="articleList"
              @load="loadArticleList"
            />
          </div>
        </van-tab>
        <van-tab name="food" title="饮食">
          <div class="item">
            <ArticleList
              v-model:loading="loading"
              :finished="finished"
              :list="articleList"
              @load="loadArticleList"
            />
          </div>
        </van-tab>
      </van-tabs>
      <!-- 文章列表 -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.top {
  height: 109px;
  background-color: #53cece;
  /* 设置左下角的圆角长度 x轴圆角长度 y轴圆角长度*/
  border-bottom-left-radius: 40px 10px;
  border-bottom-right-radius: 40px 10px;
  position: relative;
  margin-bottom: 40px;
  .title {
    position: absolute;
    font-size: 18px;
    line-height: 24px;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
  }
  .search {
    position: absolute;
    width: 345px;
    height: 40px;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    line-height: 1;
    color: #9c9c9c;
    display: flex;
    align-items: center;

    .icon {
      font-size: 16px;
      margin-left: 21px;
      margin-right: 5px;
    }
  }
}
.w {
  margin: 0 15px;
  .grid {
    margin-bottom: 10px;
    .row {
      display: flex;
      .col {
        margin: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
    }
    .row.l {
      height: 110px;

      .icon {
        font-size: 46px;
        height: 46px;
      }
      .title {
        font-size: 14px;
        font-weight: bold;
      }
      .deatils {
        font-size: 11px;
        color: #9c9c9c;
      }
    }
    .row.s {
      height: 65px;
      .icon {
        font-size: 22px;
        height: 22px;
      }
      .text {
        font-size: 12px;
      }
    }
  }

  .banner {
    img {
      display: block;
      width: 100%;
    }
  }
  .article {
    .van-tabs {
      width: 228px;
      margin-left: -15px;
    }
    .item {
      margin-left: 15px;
    }
  }
}
</style>
